<template>
  <view class="container">
    <view class="hidden-title">隐患信息</view>
    <view class="background-white">
      <view class="flex text bor-btm">
        隐患类型：<text>{{ detail.managerLevelLabel }}</text>
      </view>
      <view class="flex text bor-btm">
        隐患级别：<text>{{ detail.managerTypeLabel }}</text>
      </view>
      <view class="flex text bor-btm">
        隐患描述：<text>{{ detail.managerDesc }}</text>
      </view>
      <view class="flex text bor-btm">
        隐患位置：<text>{{ detail.location }}</text>
      </view>
      <view class="flex text bor-btm">
        <view
          >相关照片
          <image-upload state="view" :imageUrl="detail.reportPhotoUrl"></image-upload>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import CuCellGroup from '@/components/cu-cell/cu-cell-group.vue'
import CuCell from '@/components/cu-cell/cu-cell.vue'
import ImageUpload from '@/components/image-upload/index.vue'
import { mapMutations, mapState, mapActions } from 'vuex'
export default {
  name: 'DangerPreview',
  components: {
    ImageUpload,
    CuCell,
    CuCellGroup
  },
  onLoad() {
    console.log(this.$store.state.hiddenDangerInfo)
  },
  computed: {
    ...mapState({
      detail: (state) => state.hiddenDangerInfo.detail
    })
  },
  data() {
    return {}
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.background-white {
  background-color: #fff;
  padding: 20rpx 30rpx 1rpx 30rpx;

  view {
    padding: 14rpx 0;

    text {
      color: #666;
      display: inline-block;
      width: 78%;
      vertical-align: top;
    }
  }

  .bor-btm {
    display: flex;
    border-bottom: 1px solid #d5d7e3;
  }

  .photo {
    display: flex;
    justify-content: space-between;

    image {
      width: 214rpx;
      height: 214rpx;
    }
  }
}

.hidden-title {
  background: #f5f5f5;
  padding: 20rpx;
  color: #999;
}

.mb-130 {
  margin-bottom: 130px;
}

.bor-top {
  border-top: 20rpx solid #f5f5f5;
}

.cell-label {
  font-size: 30rpx;
}

.cell-content {
  font-size: 28rpx;
}

.bottom {
  margin-bottom: 300rpx;
}
</style>
